<template>
    <div class="target-card" :style="bgStyle">
        <img
            :src="target.icon != null ? target.icon : target.default_link.uri + '/favicon.ico'"
            v-if="target.icon != 'none'"
        />
        <!--Set a default img icon link-->
        <img
            v-else
        />
        <div class="target-info">
            <div class="target-name">{{target.name}}</div>
            <div class="target-description">{{target.description}}</div>
        </div>
        <img :src="require('@/assets/plus.svg')" @click="$emit('pop')">
    </div>
</template>

<script>
export default {
    props: ["target"],
    computed: {
        bgStyle: function() {
            switch (this.target.default_link.type) {
                case 1:
                    return {
                        // "background-image": require("@/assets/globe.svg"),
                        // "background-repeat": "no-repeat",
                        // "background-position": "right -10px bottom -10px"
                    };
            }
            return null;
        }
    }
};
</script>

<style scoped>
.target-name {
    font-weight: 600;
}

.target-card img {
    width: 32px;
    height: 32px;
}

.target-info {
    text-align: left;
    display: flex;
    flex-flow: column;
}

.target-card {
    width: auto;
    min-width: 150px;
    display: flex;
    flex-flow: row;
    padding: 10px;
    border: solid 1px gray;
    border-radius: 18px;
    margin: 10px;
}
</style>
